<template>
  <div v-on:click.capture="stopClick($event)" :class="[isVisitor == 1 && isWeixin ? 'c-p c-pt80' : '', theme]" class="c-bg-sgray" :style="'--mb7color:' + mb7Color" id="microPage">
    <!--游客模式提示-->
    <div v-if="isVisitor == 1 && isWeixin" :class="colorName" id="visitorTip" class="c-ph24 c-flex-row c-justify-sb c-aligni-center c-pv16 theme-bg" @click="stopClick($event)">
      <span class="c-fc-white c-fs22">当前为游客模式，登录享受更多精彩服务</span>
      <div class="c-ph18 c-pv4 c-fs22 theme-fc c-bg-white c-br24">立即登录</div>
    </div>
    <cust-index-com
      :pageName="'MICRO_PAGE'"
      :isHomePage="false"
      :userType="userType"
      :dataList="dataList"
      :upgradeMemberJump="upgradeMemberJump"
      :hasBottomBar="isPromotedAccount ? true : hasBottomBar"
    ></cust-index-com>
    <add-teacher-modal v-if="isVisitor != 1" :teacherQrCode='teacherQrcode'></add-teacher-modal>
    <div v-if="companyAuth != null && companyAuth.companyNav != null && hasBottomBar">
      <nav-bottom-bar :homeThemeCol="homeThemeCol" :itemIndex="mId" v-for="(item,index) in companyAuth.companyNav" :key="index" v-if="item.navType == 22"></nav-bottom-bar>
    </div>
    <div v-if="isPromotedAccount" class="c-pf c-bg-white c-p-b0 c-w100 c-maxw640 c-hh88 c-flex-row c-flex-center c-pz99 c-ph24 c-bd-t1">
      <div @click="goSpreadMicroPage" class="c-fs24 c-fc-white c-w100 c-hh56 c-br32 c-flex-row c-flex-center theme-bg">海报分享</div>
    </div>
  </div>
</template>

<script>
import custIndexCom from '@/components/templates/custIndexCom.vue';
import NavBottomBar from "@/components/templates/common/navBottomBar.vue";
import addTeacherModal from "@/components/templates/homeIndex/addTeacherModal.vue";
import { utilJs } from "@/utils/common.js";
let pageTitle = '微页面'; // 微页面标题
export default {
  name: "MicroPage",
  components: {
    custIndexCom,
    NavBottomBar,
    addTeacherModal,
  },
  props: [],
  beforeRouteLeave(to, from, next) {
    let scrollTop =
      document.documentElement && document.documentElement.scrollTop
        ? document.documentElement.scrollTop
        : document.body.scrollTop;
    localStorage.setItem("microPageScroll", scrollTop);
    next();
  },
  data() {
    return {
      mId: 0,
      dataList: [],
      theme: 'mb7_blue',
      hasBottomBar: true,
      teacherQrcode: '',
      userType: 1,
      upgradeMemberJump: '',
      companyAuth: localStorage.getItem("companyAuth") ? JSON.parse(localStorage.getItem("companyAuth")) : null,
      mb7Color: localStorage.getItem("mb7ThemeColor") || "#ff8831",
      homeThemeCol: localStorage.getItem("mb7ThemeColor") || "#ff8831",
      shareDesc: '',
      sharePic: '',
      shareTitle: '',
      isVisitor: localStorage.getItem("isVisitor") || 0, //1是游客
      isWeixin: false, // 是否是微信浏览器
      isPromotedAccount: false,
      isFromDraft: false
    };
  },
  watch: {
    $route(to, from) {
      if ((to.path == '/homePage/microPage/microPage' && from.path == '/homePage/microPage/microPage') || (to.path == '/homePage/microPage/microPage' && this.mId != this.$route.query.mId)) {
        this.mId = this.$route.query.mId;
        this.isPromotedAccount = this.$route.query.isPromotedAccount == 1 ? true : false;
        this.isFromDraft = this.$route.query.isFromDraft == 1 ? true : false;
        this.dataList = [];
        this.theme = 'mb7_blue';
        let bottomArr = [];
        let that = this;
        if (this.companyAuth.companyNav && this.companyAuth.companyNav.length > 0) {
          bottomArr = this.companyAuth.companyNav.filter(function (cItem) {
            return cItem.mId == that.mId;
          })
          this.hasBottomBar = (bottomArr && bottomArr.length > 0) ? true : false;
        }
        this.getIndexInfo();
      }
    }
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() {},
  methods: {
    goSpreadMicroPage() {
      this.$routerGo(this, "push", {
        path: "/homePage/spread/spreadCustom",
        query: { cId: 0, extId: this.mId, ckFrom: 400 }
      });
    },
    //游客模式点击详情进行跳转到授权页面
    stopClick(event) {
      if (localStorage.getItem("isVisitor") && localStorage.getItem("isVisitor") == 1 && window.navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == 'micromessenger' && window.navigator.userAgent.toLowerCase().match(/wxwork/i) != "wxwork" && localStorage.getItem("wxAppEnvironment") != 'wxwork') {
        let e = event || window.event;
        if (e.stopPropagation) {
          e.stopPropagation();
        } else {
          e.cancelBubble = true;
        }
        this.$routerGo(this, "push", { path: '/homePage/login/wechatAuthPage', query: { refereeId: this.$route.query.refereeId, prodId: this.$route.query.prodId, prodType: this.$route.query.prodType } });
      }
    },
    //获取首页相关数据
    getIndexInfo() {
      this.$loading.show();
      let that = this;
      pageTitle = '';
      let getUrl = global.apiurl + "company/customTemplates?id=" + this.mId;
      if (this.isPromotedAccount) {
        getUrl = getUrl + '&isPromotedAccount=1'
      }
      if (this.isFromDraft) {
        getUrl = getUrl + '&isFromDraft=1'
      } else if (this.$route.query.isFromDraft != undefined && this.$route.query.isFromDraft != null && this.$route.query.isFromDraft == 0) {
        getUrl = getUrl + '&isFromDraft=0'
      }
      utilJs.getMethod(getUrl, function (res) {
        if (JSON.stringify(res) === '[]') {
          that.$routerGo(that, "replace", {
            path: `/error/emptyPage?from=''&info=该页面不存在！`
          });
          that.$loading.hide();
          return;
        }
        if (that.isPromotedAccount) {
          sessionStorage.setItem('promotedAccountId', res.userId)
        }
        that.$loading.hide();
        that.companyAuth = JSON.parse(localStorage.getItem("companyAuth"));
        that.userType = res.userType;
        that.shareDesc = res.shareDesc;
        that.sharePic = res.sharePic;
        that.shareTitle = res.shareTitle;
        that.$store.commit('updateUserVipType', res.userType);
        localStorage.setItem("vipType" + localStorage.getItem("userId"), res.userType);
        that.teacherQrcode = res.teacherQrcode;
        that.upgradeMemberJump = res.upgradeMemberJump + '';
        that.dataList = res.modules;
        if (that.dataList[0] && that.dataList[0].modelType == 0 && that.dataList[0].items) {
          pageTitle = that.dataList[0].items.pageName ? that.dataList[0].items.pageName : '微页面';
          setDocumentTitle(pageTitle);
        }
        that.theme = res.color ? res.color : 'mb7_blue';
        that.mb7Color = res.colorValue;
        let rgbColor = utilJs.hexToRgb(res.colorValue);
        let rgbGradient = `linear-gradient(90deg,rgba(${rgbColor},1) 0%,rgba(${rgbColor},0.5) 100%);`;
        let shadowcolor = `0px 3px 10px 0px rgba(${rgbColor}, 0.2);`; // 模板色box-shadow
        let rgba10color = `rgba(${rgbColor},0.1)`;
        document.querySelector(
          "#microPage"
        ).style.cssText = `--mb7color:${that.mb7Color};--homeThemeCol:${that.homeThemeCol};--rgbcolor:${rgbGradient};--rgba10color:${rgba10color};--shadowcolor:${shadowcolor}`;
        that.wechatShare();
        that.$nextTick(() => {
          if (localStorage.getItem("microPageScroll")) {
            window.scrollTo(0, localStorage.getItem("microPageScroll"));
            localStorage.removeItem("microPageScroll");
          }
        });
      }, failRes => {
        that.$loading.hide();
      });
    },
    //分享
    wechatShare: function () {
      let shareTitle = this.shareTitle || window.localStorage.getItem("shareTitle");
      if (this.dataList[0] && this.dataList[0].modelType == 0 && this.dataList[0].items && this.shareTitle == '') {
        shareTitle = this.dataList[0].items.pageName ? this.dataList[0].items.pageName : window.localStorage.getItem("shareTitle");
      }
      let shareImg = this.sharePic || window.localStorage.getItem("shareLogo");
      let shareDesc = this.shareDesc || window.localStorage.getItem("shareDesc");
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId") +
        '&mId=' +
        this.mId;
      if (this.isPromotedAccount) {
        shareUrl = shareUrl + '&isPromotedAccount=1'
      }
      if (this.isFromDraft) {
        utilJs.wechatConfig(
          shareUrl,
          shareTitle,
          shareImg,
          shareDesc,
          function () { },
          false,
          { hideAllNonBaseMenuItem: 1 }
        );
      } else {
        utilJs.wechatConfig(
          shareUrl,
          shareTitle,
          shareImg,
          shareDesc,
          function () { },
          true,
          { hideAllNonBaseMenuItem: 0 }
        );
      }
    },
    //手机端分享
    appShare: function () {
      let shareTitle = this.shareTitle || window.localStorage.getItem("shareTitle");
      if (this.dataList[0] && this.dataList[0].modelType == 0 && this.dataList[0].items && this.shareTitle == '') {
        shareTitle = this.dataList[0].items.pageName ? this.dataList[0].items.pageName : window.localStorage.getItem("shareTitle");
      }
      let shareImg = this.sharePic || window.localStorage.getItem("shareLogo");
      let shareDesc = this.shareDesc || window.localStorage.getItem("shareDesc");
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId") +
        '&mId=' +
        this.mId;
      if (this.isPromotedAccount) {
        shareUrl = shareUrl + '&isPromotedAccount=1'
      }
      if (this.isFromDraft) {
        utilJs.appShareTrue(shareTitle, shareImg, shareUrl, shareDesc, function () { }, false, { hideAllNonBaseMenuItem: 1 });
      } else {
        utilJs.appShareTrue(shareTitle, shareImg, shareUrl, shareDesc, function () { }, true, { hideAllNonBaseMenuItem: 0 });
      }
    },
  },
  activated() {
    this.isWeixin = utilJs.isWeiXin() && window.navigator.userAgent.toLowerCase().match(/wxwork/i) != "wxwork" && localStorage.getItem("wxAppEnvironment") != 'wxwork';
    this.mId = this.$route.query.mId;
    this.isPromotedAccount = this.$route.query.isPromotedAccount == 1 ? true : false;
    this.isFromDraft = this.$route.query.isFromDraft == 1 ? true : false;
    this.theme = 'mb7_blue';
    let bottomArr = [];
    let that = this;
    if (this.companyAuth.companyNav && this.companyAuth.companyNav.length > 0) {
      bottomArr = this.companyAuth.companyNav.filter(function (cItem) {
        return cItem.mId == that.mId;
      })
      this.hasBottomBar = (bottomArr && bottomArr.length > 0) ? true : false;
    }
    setDocumentTitle(pageTitle);
    this.getIndexInfo();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
#visitorTip {
  position: fixed;
  margin: 0 auto;
  top: 0;
  width: 100%;
  z-index: 1;
  width: 16rem;
}
.theme-fc {
  color: #ff8831;
  color: var(--mb7color);
}
.theme-fc-hover:hover {
  color: #ff8831;
  color: var(--mb7color);
}
.theme-bg {
  background-color: #ff8831;
  background-color: var(--mb7color);
}
.swiper-container .theme-bg {
  background-color: #ff8831;
  background-color: var(--mb7color) !important;
}
.theme-bg-10 {
  background-color: rgba(255, 99, 45, 0.1);
  background: var(--rgba10color);
}
.theme-bg-gradient {
  background: linear-gradient(
    90deg,
    rgba(255, 99, 45, 1) 0%,
    rgba(255, 99, 45, 0.7) 100%
  );
  background: var(--rgbcolor);
}
.theme-bg:hover,
.theme-bg:focus {
  background-color: #ff8831;
  background-color: var(--mb7color);
}
.theme-bd1 {
  border: 1px solid #ff8831;
  border: 1px solid var(--mb7color);
}
.theme-bd-b2 {
  border-bottom: 2px solid #ff8831;
  border-bottom: 2px solid var(--mb7color);
}
.theme-bd-b1 {
  border-bottom: 1px solid #ff8831;
  border-bottom: 1px solid var(--mb7color);
}
.theme-bd-rd1 {
  border-right: 1px dashed #ff8831;
  border-right: 1px dashed var(--mb7color);
}
.theme-bd-r1 {
  border-right: 1px solid #ff8831;
  border-right: 1px solid var(--mb7color);
}
.theme-bd-l2 {
  border-left: 2px solid #ff8831;
  border-left: 2px solid var(--mb7color);
}
.theme-bd-l4 {
  border-left: 4px solid #ff8831;
  border-left: 4px solid var(--mb7color);
}
.theme-box-shadow {
  box-shadow: 0px 3px 10px 0px rgba(255, 99, 45, 0.2);
  box-shadow: var(--shadowcolor);
}
</style>


